<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>

    <!-- Basics -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Mr.H</title>
    <link rel="shortcut icon" href="img/favicons/hong_favicon.ico">
    <!-- Mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- CSS -->
    <link rel="stylesheet" href="css/mui.css">
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/hyaStyless.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <style>
        .mui-table-view-cell.active {
            color: red;
        }

        .weatherForecast {
            text-align: center;
            align-items: center;
        }

        .mui-table-view:before,
        .mui-table-view:after,
        .mui-table-view-cell:after {
            height: 0;
        }

        .weatherForecast li {
            text-align: center;
            min-width: 180px;
            align-items: center;
            flex-wrap: wrap;
            padding: 15px 0;
        }

        .weatherForecast li div {
            width: 100%;
            text-align: center;
            line-height: 24px;
        }

        @media screen and (min-width:0px) and (max-width:459px) {
            .weatherForecast li {
                width: 100%;
                flex-wrap: nowrap;
                justify-content: space-around;
            }
            .weatherForecast li div {
                width: auto;
                text-align: center;
            }
            .weatherForecast li div:last-child {
                min-width: 48px;
            }
        }
    </style>
</head>

<body>
    <div id="index">
        <!-- <div class="accessRecord">
            <button type="button" class="mui-btn mui-btn-danger" @click="showAccessRecord">访问记录</button>
        </div> -->
        <div class="modal-overlay" v-show="queryState"></div>
        <div class="wrapper">
            <a class="mobileHide QQ" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=348293307&site=qq&menu=yes">
                <img border="0" src="http://wpa.qq.com/pa?p=2:348293307:53" alt="点击这里给我发消息" title="点击这里给我发消息" />
            </a>
            <!-- <header>
            <a class="menu-icon jiji">
                <span></span>
            </a>
            <nav class="menu visuallyhidden">
                <ul>
                    <li>
                        <a href="#home">主页</a>
                    </li>
                    <li>
                        <a href="#about">技能</a>
                    </li>
                    <li>
                        <a href="#work">经历</a>
                    </li>
                </ul>
            </nav>
        </header> -->
            <section id="home" class="row">
                <div class="overlay">
                    <div class="col home-title jiji">
                        <h1>洪艺安
                            <a class="mobileHide" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=348293307&site=qq&menu=yes">
                                <img border="0" src="http://wpa.qq.com/pa?p=2:348293307:51" alt="点击这里给我发消息" title="点击这里给我发消息" />
                            </a>
                        </h1>
                        <h2>HTML5 / CSS3 / JQ / JS / VUE</h2>
                        <!-- 天气 -->
                        <div id="weather">
                            <ul v-show="weather" class="mui-table-view weatherForecast hya-flex" style="background-color: transparent;color: white;flex-wrap: wrap;">
                                <!--  <li class="mui-table-view-cell hya-flex" v-if="weather.yesterday">
                                    <div>{{dateIntercept(weather.yesterday.date)}}</div>
                                    <div>{{weather.yesterday.low}}~{{weather.yesterday.high}}</div>
                                    <div>{{weather.yesterday.type}}</div>
                                </li>-->
                                <li :class="index==0?'mui-table-view-cell active hya-flex':'mui-table-view-cell hya-flex'"
                                    v-for="(item,index) in weather.forecast">
                                    <div>{{dateIntercept(item.date)}}</div>
                                    <div>{{item.low}}~{{item.high}}</div>
                                    <div>{{item.type}}</div>
                                </li>
                                <li>
                                    <button type="button" class="mui-btn mui-btn-blue" @click="modifyAdd">重新修改地址</button>
                                </li>
                                <li>
                                    <button type="button" class="mui-btn mui-btn-blue" @click="showAccessRecord">访问记录</button>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </section>

            <section id="about" class="row">
                <div class="page about-content">
                    <div class="col about-title">
                        <h3 data-100="-webkit-transform: translateX(100px); opacity:0;" data-500="-webkit-transform: translateX(0px); opacity:1;">技能点</h3>
                    </div>
                    <div class="col empty">&nbsp;</div>
                    <div class="col about-description">
                        <p data-100="opacity:0;" data-500="opacity:1;">升级中...</p>
                    </div>
                    <div class="col empty">&nbsp;</div>
                </div>
            </section>
            <ul class="hya-ul">
                <li>HTML5 / CSS3</li>
                <li>jQuery / JS</li>
                <li>Vue</li>
                <li>Less</li>
                <li>Git / SVN</li>
                <li>nodejs</li>
            </ul>
            <!-- <section id="services" class="row">
            <div class="services-content page"> -->
            <!-- <div class="col services-design" data-600="-webkit-transform: translateY(10px); opacity:0;" data-800="-webkit-transform: translateY(0px); opacity:1;">
                    <span class="icon-design"></span>
                    <ul>
                        <li>2013-2017</li>
                        <li>福建师范大学</li>
                        <li>计算机科学与技术</li>
                    </ul>
                </div> -->
            <!-- </div>
        </section> -->
            <hr>
            <section id="work" class="row">
                <div class="work-content page">
                    <div class="col work-title">
                        <h3 data-900="-webkit-transform: translateX(-100px); opacity:0;" data-1300="-webkit-transform: translateX(0px); opacity:1;">经历简介</h3>
                    </div>
                    <div class="col empty">&nbsp;</div>
                    <div class="col work-description">
                        <p data-900="opacity:0;" data-1300="opacity:1;">经历简介</p>
                    </div>
                    <div class="col empty">&nbsp;</div>
                </div>
                <div class="work-examples page">
                    <div class="col work-item" data-1300="opacity:0;" data-1400="opacity:1;">
                        <img src="img/works/1.jpg" alt="">
                        <div class="work-item-inside fjsfdx">
                            <div class="work-item-inside-content">
                                <span>2013-2017</span>
                                <span>计算机科学与技术</span>
                            </div>
                        </div>
                    </div>
                    <div class="col work-item" data-1300="opacity:0;" data-1400="opacity:1;">
                        <img src="img/works/1.jpg" alt="">
                        <div class="work-item-inside fzfxj">
                            <div class="work-item-inside-content">
                                <span>2017-2018</span>
                                <span>微信公众号/APP</span>
                            </div>
                        </div>
                    </div>
                    <div class="col work-item" data-1300="opacity:0;" data-1400="opacity:1;">
                        <img src="img/works/1.jpg" alt="">
                        <div class="work-item-inside flxx">
                            <div class="work-item-inside-content">
                                <span>2018-至今</span>
                                <span>微信公众号/微信小程序</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <hr>
            <section id="contact" class="row">
                <div class="contact-content page">
                    <div class="col contact-title">
                        <h3 data-900="-webkit-transform: translateX(-100px); opacity:0;" data-1300="-webkit-transform: translateX(0px); opacity:1;">娱乐频道</h3>
                    </div>
                </div>
                <ul class="contact-ul hya-flex">
                    <li @click="open('jokeImg.html')">纯图搞笑</li>
                    <li @click="open('jokeText.html')">休闲一刻</li>
                    <li @click="open('novel.html')">小说排行</li>
                </ul>
                <ul class="contact-ul hya-flex">
                    <li @click="open('movie.html')">热门电影</li>
                    <li @click="open('messageBoard.html')">留言板</li>
                    <li>目前暂定</li>
                </ul>
            </section>
            <section id="contact" class="row">
                <div class="contact-content page">
                    <div class="col contact-title">
                        <h3 data-100="-webkit-transform: translateX(100px); opacity:0;" data-500="-webkit-transform: translateX(0px); opacity:1;">蜉蝣</h3>
                    </div>
                    <div class="col empty">&nbsp;</div>
                    <div class="col contact-description">
                        <a href="#" class="but">hello@348293307.com</a>
                    </div>
                </div>
            </section>

        </div>

        <div class="loader"></div>
        <ul class="mui-table-view returnCity">
            <li class="mui-table-view-cell" v-for="(item, index) in returnCityList" :key="index">{{item.returnCity}}
                <span class="mui-badge mui-badge-primary">{{item.count}}</span>
            </li>
        </ul>
    </div>
    <!-- JavaScript -->
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/main.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="js/av-min.js"></script>
    <script src="js/index.js"></script>
    <script>
        mui.init();
        var index_data = new Vue({
            el: '#index',
            data: function () {
                return {
                    data: '',
                    weather: {},
                    address: localStorage.getItem('address') || '',
                    queryState: true,
                    returnCitySQL: '',
                    returnCityList: []
                }
            },
            created: function () {
                this.$nextTick(function () {
                    var that = this;
                    mui('.contact-ul li').each((index, e) => {
                        mui(e)[0].addEventListener('tap', () => {
                            if (index == 0 || index == 1) {
                                mui.toast('努力中。。。');
                            }
                        })
                    })
                    // console.log(returnCitySN);
                    mui.toast(`来自${returnCitySN.cname}的用户，您好！`);
                    // 添加访问记录

                    AV.init({
                        appId: 'pLS7RyXgxl8cHOXTVOTjCvbE-gzGzoHsz',
                        appKey: 'pLnAGJmxwnwWeqnGiLv54Q6w'
                    })

                    var ReturnCitySN = AV.Object.extend('returnCitySN');
                    // 新建一个 returnCitySN 对象
                    that.returnCitySQL = new ReturnCitySN();
                    that.returnCitySQL.set('returnCity', returnCitySN.cname);
                    that.returnCitySQL.save().then(function (res) {
                        // 成功保存之后，执行其他逻辑.
                        console.log('New object created with objectId: ' + res.id);
                        localStorage.setItem('objectId', res.id);
                    }, function (error) {
                        // 异常处理
                        console.log('error message: ' + error.message);
                    });
                })

            },
            mounted() {
                this.$nextTick(function () {
                    var that = this;
                    that.queryState = false;
                    // 获取天气
                    // https://www.apiopen.top/weatherApi?city=成都
                    if (!that.address && !that.queryState) {
                        mui.prompt('请输入你所在城市', '城市', '天气', '', function (e) {
                            if (e.index == 1) {
                                that.getWeather(e.value);
                            }
                        })
                        $('.mui-popup-input input').focus();
                    } else {
                        that.getWeather();
                    }
                })
            },
            methods: {
                //修改地址
                modifyAdd() {
                    var that = this;
                    localStorage.setItem('address', '');
                    mui.prompt('请输入你所在城市', '城市', '天气', '', function (e) {
                        if (e.index == 1) {
                            that.getWeather(e.value);
                        }
                    })
                    $('.mui-popup-input input').focus();
                },
                //获取天气
                getWeather(name) {
                    var that = this;
                    var addName = name || that.address;
                    that.queryState = true;
                    $.get('https://www.apiopen.top/weatherApi?city=' + addName)
                        .then(
                            res => {
                                localStorage.setItem('address', addName);
                                // console.log(res);
                                that.queryState = false;
                                if (res.code == 200) {
                                    that.weather = res.data;
                                } else {
                                    mui.toast(res.msg);
                                    localStorage.removeItem('address');
                                }
                            })
                },
                //截取日期
                dateIntercept(time) {
                    // return time.slice(2);
                    return time;
                },
                /**
                 * @msg:显示访问记录
                 * @param {type}
                 * @return:''
                 */
                showAccessRecord: function () {
                    var that = this;
                    var query = new AV.Query('returnCitySN');
                    that.queryState = true;
                    query.find().then(res => {
                        var list = [];
                        res.forEach(element => {
                            var city = element.attributes.returnCity;
                            var newCity = true;
                            if (list.length > 0) {
                                list.forEach(e => {
                                    if (e.returnCity === city) {
                                        e.count++;
                                        newCity = false;
                                    }
                                });
                                if (newCity) {
                                    list.push({
                                        'returnCity': city,
                                        'count': 1
                                    });
                                }
                            } else {
                                list.push({
                                    'returnCity': city,
                                    'count': 1
                                });
                            }
                        });
                        that.returnCityList = list;
                        $('.returnCity').show();

                        $(document.body).toggleClass("html-body-overflow");
                        $('.modal-overlay').click(function () {
                            $('.returnCity').hide();
                            $(document.body).toggleClass("html-body-overflow");
                            that.queryState = false;
                        })
                    }, (err) => {
                        console.log(err);
                        mui.msg('拉取数据失败，请重新点击');
                        that.queryState = false;
                    })
                },
                // 禁止滚动
                scrollFalse: function (ele) {
                    ele.addEventListener("touchmove", function (e) {
                        e.stopPropagation();
                        e.preventDefault();
                    }, false);
                }
            },
        })
    </script>
</body>

</html>